<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/style.css"/>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<!--头部-->
    <header class="publicHeader">
        <h1>超市账单管理系统</h1>
        <div class="publicHeaderR">
            <p><span>下午好！</span><span style="color: #fff21b"> Admin</span> , 欢迎你！</p>
            <a href="login.html">退出</a>
        </div>
    </header>
<!--时间-->
    <section class="publicTime">
        <span id="time">2015年1月1日 11:11  星期一</span>
        <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>
<!--主体内容-->
    <section class="publicMian ">
        <div class="left">
            <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
            <nav>
                <ul class="list">
                    <li id="active"><a href="billList.html">账单管理</a></li>
                    <li><a href="providerList.html">供应商管理</a></li>
                    <li><a href="userList.html">用户管理</a></li>
                    <li><a href="password.html">密码修改</a></li>
                    <li><a href="login.html">退出系统</a></li>
                </ul>
            </nav>
        </div>
        <div class="right">
            <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>账单管理页面</span>
            </div>
			<div id="app">
            <div class="search">
                <span>商品名称：</span>
                <input type="text" v-model="param.name" placeholder="请输入商品的名称"/>
                
                <span>供应商：</span>
                <select name="tigong" v-model="param.pid" >
                    <option v-for="provider in providers" :value="provider.id">{{provider.name}}</option>
                </select>

                <span>是否付款：</span>
                <select name="fukuan" v-model="param.state">
                    <option  value="">--请选择--</option>
                    <option value="已付款">已付款</option>
                    <option value="未付款">未付款</option>
                </select>

                <input type="button" @click="search()" value="查询"/>
                <a href="billAdd.html">添加订单</a>
            </div>
            <!--账单表格 样式和供应商公用-->
            <table class="providerTable" cellpadding="0" cellspacing="0">
                <tr class="firstTr">
                    <th width="10%">账单编码</th>
                    <th width="20%">商品名称</th>
                    <th width="10%">供应商</th>
                    <th width="10%">账单金额</th>
                    <th width="10%">是否付款</th>
                    <th width="10%">创建时间</th>
                    <th width="30%">操作</th>
                </tr>
				   
                <tr v-for="(bill,index) in bills">
                    <td>{{bill.id}}</td>
                    <td>{{bill.name}}</td>
                    <td>{{bill.provider.name}}</td>
                    <td>{{bill.money}}元</td>
                    <td>{{bill.state}}</td>
                    <td>{{bill.time}}</td>
                    <td>
                        <a href="javascript:void(0)" @click="show(bill.id)"><img src="img/read.png" alt="查看" title="查看"/></a>
                        <a href="javascript:void(0)" @click="update(bill.id)"><img src="img/xiugai.png" alt="修改" title="修改"/></a>
                        <a href="javascript:void(0)" @click="remove(bill.id,index)" class="removeBill"><img src="img/schu.png" alt="删除" title="删除"/></a>
                    </td>
                </tr>
                
            </table>
			</div>
		</div>
    </section>

<!--点击删除按钮后弹出的页面-->
<div class="zhezhao"></div>
<div class="remove" id="removeBi">
    <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
            <p>你确定要删除该订单吗？</p>
            <a href="#" id="yes">确定</a>
            <a href="#" id="no">取消</a>
        </div>
    </div>
</div>

    <footer class="footer">
    </footer>

   <script>
	   
	   var  vue  = new Vue({
		   el:"#app",
		   data:{
			   //接受查询条件
			   param:{},
			   //账单集合
			   bills:[],
			   providers:[]
		   },
		   mounted:function(){
			   
			   var url = "http://localhost:8080/sms/bill/list";
			   
			   this.$http.get(url,{params:{}}).then(function(data){
				   var resultVo = data.body;
				   this.bills = resultVo.data;
			   });
			   
			   
			   var url_p = "http://localhost:8080/sms/bill/providers";
			   
			   this.$http.get(url_p,{params:{}}).then(function(data){
			   				   var resultVo = data.body;
			   				   this.providers = resultVo.data;
			   });
			   
		   },
		   methods:{
			   search:function(){
				   var url = "http://localhost:8080/sms/bill/search";
				   this.$http.post(url,this.param).then(function(data){
					   this.bills = data.body.data;
				   });
			   },
			   show:function(id){
				   //js存储数据对象
				   //sessionStorage 前端的会话存储! 一次会话!
				   //localStorage  前端浏览器的永久存储对象! 一致保留!
				   //注意 注意  key 和 value支持字符串类型!
				   // sessionStorage.setItem(key,value);
				   // sessionStorage.getItem(key);
				   // sessionStorage.removeItem(key); //根据key清空
				   // sessionStorage.clear(); 清空所有数据
				   
				   // JSON.stringify()
				   // JSON.parse()
				   
				   sessionStorage.setItem("id",id);
				   
				   location.href = "billView.html";
			   },
			   update:function(id){
			   				   //js存储数据对象
			   				   //sessionStorage 前端的会话存储! 一次会话!
			   				   //localStorage  前端浏览器的永久存储对象! 一致保留!
			   				   //注意 注意  key 和 value支持字符串类型!
			   				   // sessionStorage.setItem(key,value);
			   				   // sessionStorage.getItem(key);
			   				   // sessionStorage.removeItem(key); //根据key清空
			   				   // sessionStorage.clear(); 清空所有数据
			   				   
			   				   // JSON.stringify()
			   				   // JSON.parse()
			   				   
			   				   sessionStorage.setItem("id",id);
			   				   
			   				   location.href = "billUpdate.html";
			   },
			   remove:function(xid,index){
				   
				   var url = "http://localhost:8080/sms/bill/remove";
				   this.$http.get(url,{params:{id:xid}}).then(function(data){
				   			var code = data.body.code;
							if(code==1){
								this.bills.splice(index,1);
							}else{
								alert("删除失败!");
							}
				   });
				   
			   }
		   }
	   });
	   
   </script>

</body>
</html>